<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>后盾人</title>
  </head>
  <body>
    <style>
      div {
        height: 50px;
        width: 0px;
        background: #8e44ad;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #fff;
      }
    </style>
    <div id="loading">0%</div>
  </body>
  <script src="php/ajax.js"></script>
  <script>
    function query(name) {
      return ajax(`http://localhost:8888/php/user.php?name=${name}`);
    }

    (async () => {
      console.time('aaa')
      let users = ["后盾人", "李四", "赵六"];
      for (let i = 0; i < users.length; i++) {
        let user = await query(users[i]);
        let progress = ((i + 1) / users.length) * 100;
        loading.style.width = progress + "%";
        loading.innerHTML = Math.round(progress) + "%";
      }

      console.timeEnd('aaa')

    });

(async () => {
      console.time('bb')
      let users = ["后盾人", "李四", "赵六"];
      users.map(user => {
        return  query(user);
      }).forEach(async (p, i) => {
        let user = await p;
        let progress = ((i + 1) / users.length) * 100;
        loading.style.width = progress + "%";
        loading.innerHTML = Math.round(progress) + "%";

        if(i === users.length-1) {
          console.timeEnd('bb')
        }
      })
      /*
      for (let i = 0; i < users.length; i++) {
        let p =  query(users[i]);
        let user = await p;
        let progress = ((i + 1) / users.length) * 100;
        loading.style.width = progress + "%";
        loading.innerHTML = Math.round(progress) + "%";
      }
      */
     

    })();


    



    // async function loadUser(users) {
    //   for (let i = 0; i < users.length; i++) {
    //     let user = await query(users[i]);
    //     let progress = ((i + 1) / users.length) * 100;
    //     loading.style.width = progress + "%";
    //     loading.innerHTML = Math.round(progress) + "%";
    //   }
    // }
    // loadUser(["后盾人", "李四", "赵六"]);
  </script>
</html>
